<template>
  <div class="head-card">
    <div class="search">

    </div>
    <div class="content">
      <div class="head">
        <div class="left">
          <el-button type="primary"
                     @click="insertEvent()"
                     :icon="Search">新增

          </el-button>
          <el-button color="#626aef"
                     @click="remove"
                     :icon="Edit">删除测试
          </el-button>
          <el-button type="warning"
                     @click="removeSelectRowEvent"
                     :icon="Delete">删除
          </el-button>
          <el-button type="warning"
                     @click="saveEvent"
                     :icon="Delete">保存
          </el-button>
          <el-button type="warning"
                     @click="revertEvent"
                     :icon="Delete">还原
          </el-button>
        </div>
        <div class="right">
          <el-button :icon="Search">
          </el-button>
          <el-button :icon="Edit">
          </el-button>
          <el-button :icon="Delete">
          </el-button>
          <el-button :icon="Delete">
          </el-button>
        </div>
      </div>
      insertList{{insertList}}
      <br>
      removeList:{{removeList}}
      <br>
      updateList:{{updateList}}
      <div class="table">
        <vxe-table
          keep-source
          ref="xTable"
          :align="tableConfig.align"
          :edit-config="{trigger: 'click', mode: 'cell', showStatus: true}"
          :data="roleList"
          :row-config="rowConfig">
          <vxe-column type="checkbox"
                      width="60"></vxe-column>
          <vxe-column type="seq"
                      width="60"></vxe-column>
          <vxe-column field="roleId"
                      width="60"></vxe-column>

          <vxe-column field="roleName"
                      :edit-render="{autofocus: '.vxe-input--inner', defaultValue: '默认的名字'}"
                      title="角色名">
            <template #edit="{ row }">
              <vxe-input v-model="row.roleName"
                         type="text"></vxe-input>
            </template>
          </vxe-column>

          <vxe-column field="currentOccu"
                      :edit-render="{autofocus: '.vxe-input--inner', defaultValue: '武士'}"
                      title="当前职业">
            <template #edit="{ row }">
              <vxe-input v-model="row.currentOccu"
                         type="text"></vxe-input>
            </template>
          </vxe-column>

          <vxe-column field="avatar"
                      :edit-render="{autofocus: '.vxe-input--inner', defaultValue: 'a.png'}"
                      title="头像">
            <template #edit="{ row }">
              <vxe-input v-model="row.avatar"
                         type="text"></vxe-input>
            </template>
          </vxe-column>

          <vxe-column field="vipLevel"
                      title="vip等级"
                      :edit-render="{autofocus: '.vxe-input--inner', defaultValue: 'a.png'}"
                      sortable>
            <template #default="{row}">
              <el-tag>{{ row.vipLevel }}</el-tag>
            </template>
            <template #edit="{ row }">
              <vxe-input v-model="row.vipLevel"
                         type="text"></vxe-input>
            </template>
          </vxe-column>

          <vxe-column field="occuDetail"
                      :edit-render="{autofocus: '.vxe-input--inner', defaultValue: '武武武武'}"
                      title="转职信息">
            <template #edit="{row}">
              <vxe-input v-model="row.occuDetail"
                         type="text"></vxe-input>
            </template>
          </vxe-column>
          <vxe-column field="occuTimes"
                      :edit-render="{autofocus: '.vxe-input--inner', defaultValue: '未转'}"
                      title="转职次数"
                      sortable>
            <template #default="{row}">
              <el-tag>{{ row.occuTimes }}</el-tag>
            </template>
            <template #edit="{ row }">
              <vxe-input v-model="row.occuTimes"
                         type="text"></vxe-input>
            </template>
          </vxe-column>

          <vxe-column field="resistance"
                      :edit-render="{autofocus: '.vxe-input--inner', defaultValue: '全满'}"
                      title="抗性">
            <template #edit="{row}">
              <vxe-input v-model="row.resistance"
                         type="text"></vxe-input>
            </template>
          </vxe-column>

          <vxe-column field="isVisible"
                      :edit-render="{autofocus: '.vxe-input--inner', defaultValue: true}"
                      title="是否可见">
            <template #edit="{row}">
              <vxe-input v-model="row.isVisible"
                         type="text"></vxe-input>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
    </div>
  </div>
</template>

<script>
import { Search, Edit, Delete } from "@element-plus/icons-vue";

export default {
  name: "Index"
};
</script>

<script setup>

import { VXETable } from "vxe-table";

import { computed, onMounted } from "vue";
import { useStore } from "vuex";
import { addRoleListApi, getRolesByIdApi, removeRoleListApi, updateRoleListApi } from "../../api/role";

const store = useStore();
let roleList = computed(() => store.getters["role/roleList"]);
let insertList=ref([])
let updateList=ref([])
let removeList=ref([])
onMounted(() => {
  store.dispatch("role/getRoles");
});

/**
 * 更新roleStore中的role
 */
const getRoles = () => {
  store.dispatch("role/getRoles");
};

const remove = () => {
  removeRoleListApi([{
    roleId: 40
  }]);
};

const xTable = ref();
const insertEvent = async (row) => {
  const $table = xTable.value;
  if ($table) {
    const record = {
      roleName: "",
      currentOccu: "武士",
      avatar: "",
      vipLevel: "0",
      occuDetail: "",
      occuTimes: "0",
      resistance: "全满",
      isVisible: true,
      userId: store.getters["user/userId"]
    };
    console.log(record);
    const { row: newRow } = await $table.insertAt(record, row);
    await $table.setEditCell(newRow, "name");
  }
};

const saveEvent = async () => {
  const $table = xTable.value;
  if ($table) {
    let { insertRecords, removeRecords, updateRecords } = $table.getRecordset();

    insertList.value=insertRecords
    removeList.value=removeRecords
    updateList.value=updateRecords

    const type = await VXETable.modal.confirm("您确定要保存刚才的操作吗?");
    if (type === "confirm") {
      //点击保存则接口保存、修改、删除

      if (insertRecords.length > 0) {
        console.log('insert:',insertRecords);
        await addRoleListApi(insertRecords);
        getRoles();
      }
      //添加数据到后端之后刷新数据列表,根据后端携带的id来进行更新和删除
      // updateRecords = [{ roleId: 71, roleName: "yyds", userId: 1 }];
      if (updateRecords.length > 0) {
        await addRoleListApi(updateRecords);
        getRoles();
      }
      if (removeRecords.length > 0) {
        await removeRoleListApi(removeRecords);
        getRoles();
      }
    }
    // VXETable.modal.alert(
    //   `insertRecords=${JSON.stringify(insertRecords)}
    //   removeRecords=${JSON.stringify(removeRecords)}
    //   updateRecords=${updateRecords.length}`);
  }
};

const removeSelectRowEvent = async () => {
  const $table = xTable.value;
  if ($table) {
    const selectRecords = $table.getCheckboxRecords();
    if (selectRecords.length) {
      const type = await VXETable.modal.confirm("您确定要删除选中的数据吗?");
      if (type === "confirm") {
        await $table.removeCheckboxRow();
      }
    } else {
      VXETable.modal.message({ content: "请至少选择一条数据", status: "error" });
    }
  }
};

const revertEvent = async () => {
  const $table = xTable.value;
  if ($table) {
    const type = await VXETable.modal.confirm("您确定要还原数据吗?");
    if (type === "confirm") {
      await $table.revertData();
    }
  }
};

/**
 * vxe-table配置
 */
const tableConfig = {
  align: "center"
};

/**
 * vxe-table行配置
 */
const rowConfig = {
  isHover: true
};

</script>

<style lang="scss"
       scoped>
.head-card {
  width: $base-width;

  .search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: $base-main-padding;
    background-color: $base-color-white;
  }

  .content {
    margin-top: 10px;
    padding: 10px;

    background-color: $base-color-white;

    .head {
      padding: $base-main-padding;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
      }

      .right {
      }


    }

    .table {
      margin: 25px;

    }

  }
}
</style>
